﻿<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>admin</title>
    <link type="text/css" rel="stylesheet" media="all" href="<%=request.getContextPath()%>/styles/global.css"/>
    <link type="text/css" rel="stylesheet" media="all" href="<%=request.getContextPath()%>/styles/global_color.css"/>
    <script src="<%=request.getContextPath()%>/styles/jquery-3.3.1.js"></script>
    <script language="javascript" type="text/javascript">
        //保存成功的提示消息
        function showResult() {
            // showResultDiv(true);
            // window.setTimeout("showResultDiv(false);", 3000);
            document.form_addAdmin.onsubmit;
        }

        function showResultDiv(flag) {
            var divResult = document.getElementById("save_result_info");
            if (flag)
                divResult.style.display = "block";
            else
                divResult.style.display = "none";
        }

        $(function () {
            $.ajax({
                type: "POST",
                url: "/admin.do/queryRoleInfo",

                success: function (resp) {
                    var div123 = $('#div123');
                    var ul = $('<ul></ul>');

                    // var li = $('<li></li>').text("究极测试")

                    for (const item of resp) {
                        var li = $('<li></li>').text(item.name);
                        // li.name="roleId";
                        // li.type="checkbox";
                        var input = $("<input type='checkbox' name='roleId'/>")
                        input.attr("value", item.roleId);

                        li.append(input);
                        ul.append(li);
                    }
                    div123.append(ul)
                }

            })
        })

    </script>
</head>
<body>
<!--Logo区域开始-->
<div id="header">
    <img src="../images/logo.png" alt="logo" class="left"/>
    <a href="<%=request.getContextPath()%>/admins/exit">[退出]</a>
</div>
<!--Logo区域结束-->
<!--导航区域开始-->
<div id="navi">
    <c:import url="../navigation.jsp"/>
    <script>
        var li = document.getElementById("menu").children;
        var title = document.getElementsByTagName('title')[0].textContent;
        for (let i = 0; i < li.length; i++) {
            if (li[i].children[0].className.startsWith(title)){
                li[i].children[0].className = title + '_on';
            }
        }
    </script>
</div>
<!--导航区域结束-->
<!--主要区域开始-->
<script>

    function verifyNameBlur() {
        const regtitle = /^[A-Za-z0-9]{0,20}$/;
        const uname = $("#verifyName").val();
        if (uname.length <= 0 || !regtitle.test(uname)) {
            $("#verifyNameError").show();
        } else {
            $("#verifyNameError").hide();
        }
    }

    function verifyAdminCodeBlur() {
        const regtitle = /^[A-Za-z0-9]{0,20}[A-Za-z0-9]{0,20}$/;
        const adminCode = $("#verifyName").val();
        if (adminCode.length <= 0 || !regtitle.test(adminCode)) {
            $("#verifyAdminCodeError").show();
        } else {
            $("#verifyAdminCodeError").hide();
        }
    }

    function verifyPasswordBlur() {
        const regtitle = /^[A-Za-z0-9]{0,20}[A-Za-z0-9]{0,20}$/;
        const password = $("#verifyPassword").val();
        if (password.length <= 0 || !regtitle.test(password)) {
            $("#verifyPasswordError").show();
        } else {
            $("#verifyPasswordError").hide();
        }
    }

    function verifyPassword1Blur() {
        const password = $("#verifyPassword").val();
        const password1 = $("#verifyPassword1").val();

        if (password1 != password) {
            $("#verifyPassword1Error").show();
        } else {
            $("#verifyPassword1Error").hide();
        }
    }

    function verifyTelephoneBlur() {
        // const regtitle = /^(13[0-9]|15[0-9]|18[0-9]|16[0-9])\d{8}$/;
        const regtitle = /^1[0-9]{10}$/;
        const telephone = $("#verifyTelephone").val();
        if (telephone.length <= 0 || !regtitle.test(telephone)) {
            $("#verifyTelephoneError").show();
        } else {
            $("#verifyTelephoneError").hide();
        }
    }

    function verifyEmailBlur() {
        const regtitle = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        const email = $("#verifyEmail").val();
        if (email.length <= 0 || !regtitle.test(email)) {
            $("#verifyEmailError").show();
        } else {
            $("#verifyEmailError").hide();
        }
    }


    function checkTech() {
        // var techNode = document.getElementsByName("roleId");
        // var flag = false;
        var checked=$("input[name='roleId']:checked");
        if(checked.length==0){
            $('#verifyRoleError').show();
        }else {
            $('#verifyRoleError').hide();
        }
    }

</script>
<div id="main">
    <div id="save_result_info" class="save_success">保存成功！</div>
    <form name="form_addAdmin" action="<%=request.getContextPath()%>/admin.do/add" method="post" class="main_form">
        <div class="text_info clearfix"><span>姓名：</span></div>
        <span class="input_info">
            <input onblur="verifyNameBlur()" id="verifyName" name="name" type="text"/>
            <span class="required">*</span>
            <div id="verifyNameError" style="display: none;" class="validate_msg_long">20长度以内的汉字、字母、数字的组合</div>
        </span>
        <div class="text_info clearfix"><span>管理员账号：</span></div>
        <div class="input_info">
            <input onblur="verifyAdminCodeBlur()" id="verifyAdminCode" name="adminCode" type="text"/>
            <span class="required">*</span>
            <span style="display: none" id="verifyAdminCodeError" class="validate_msg_long">30长度以内的字母、数字和下划线的组合</span>
        </div>
        <div class="text_info clearfix"><span>密码：</span></div>
        <div class="input_info">
            <input onblur="verifyPasswordBlur()" id="verifyPassword" name="password" type="password"/>
            <span class="required">*</span>
            <span style="display: none" id="verifyPasswordError"
                  class="validate_msg_long error_msg">30长度以内的字母、数字和下划线的组合</span>
        </div>
        <div class="text_info clearfix"><span>重复密码：</span></div>
        <div class="input_info">
            <input id="verifyPassword1" onblur="verifyPassword1Blur()" name="repeat" type="password"/>
            <span class="required">*</span>
            <span id="verifyPassword1Error" style="display: none" class="validate_msg_long error_msg">两次密码必须相同</span>
        </div>
        <div class="text_info clearfix"><span>电话：</span></div>
        <div class="input_info">
            <input id="verifyTelephone" onblur="verifyTelephoneBlur()"  name="telephone" type="text" class="width200"/>
            <span class="required">*</span>
            <span style="display: none" id="verifyTelephoneError" class="validate_msg_medium error_msg">正确的电话号码格式：手机或固话</span>
        </div>
        <div class="text_info clearfix"><span>Email：</span></div>
        <div class="input_info">
            <input onblur="verifyEmailBlur()" id="verifyEmail"  name="email" type="text" class="width200"/>
            <span class="required">*</span>
            <span style="display: none" id="verifyEmailError" class="validate_msg_medium error_msg">50长度以内，正确的 email 格式</span>
        </div>
        <div class="text_info clearfix"><span>角色：</span></div>
        <div class="input_info_high">
            <div onmouseover="checkTech()" id="div123" class="input_info_scroll">
                <%--<ul id="role">--%>
                <%--<li><input name="roleId" type="checkbox" value="100"  />管理员</li>--%>
                <%--<li><input name="roleId" type="checkbox" value="200" />营业员</li>--%>
                <%--<li><input name="roleId" type="checkbox" value="300" />经理</li>--%>
                <%--<li><input name="roleId" type="checkbox" value="400" />账务账号管理员</li>--%>
                <%--<li><input name="roleId" type="checkbox" value="500" />业务账号管理员</li>--%>
                <%--<li><input name="roleId" type="checkbox" value="600" />账务账号管理员</li>--%>
                <%--<li><input type="checkbox" />业务账号管理员</li>--%>
                <%--</ul>--%>
            </div>
            <span class="required">*</span>
            <div style="display: none" id="verifyRoleError" class="validate_msg_tiny error_msg">至少选择一个</div>
        </div>
        <div class="button_info clearfix">
            <input type="submit" value="保存" class="btn_save" onclick="showResult();"/>
            <input type="button" value="取消" class="btn_save"
                   onclick="javascript:window.location.href='<%=request.getContextPath()%>/admin.do/findAll'"/>
        </div>
    </form>
</div>
<!--主要区域结束-->
<div id="footer">
    <span>[源自北美的技术，最优秀的师资，最真实的企业环境，最适用的实战项目]</span>
    <br/>
    <span>版权所有(C)云科技有限公司 </span>
</div>
</body>
</html>
